<template>
	<div class="info">
        <van-nav-bar title="个人信息" left-arrow @click-left="back" @click-right="save" right-text="保存" />
        <div class="headdiv">
            <img :src="form.headimgurl" class="infohead" v-on:click="upload">
            <p  v-on:click="upload">点击修改头像</p>   
        </div>
		<van-cell-group>
			<van-field :value="id" label="用户ID"  disabled />
            <van-field :value="account" label="账号"  disabled />
            <van-field v-model="form.nickname" label="昵称" clearable />
            <van-radio-group v-model="form.sex">
                <van-cell-group>
                    <van-cell title="男" clickable @click="form.sex = '1'" >
                      <van-radio name="1" />
                    </van-cell>
                    <van-cell title="女" clickable @click="form.sex = '2'" >
                      <van-radio name="2" />
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <van-cell title="出生日期" :value="form.birthday" :clickable="true" @click="birthday=true" />
		</van-cell-group>
        <Cropper :initParam="{scale: 1}" :successCallback="uploadHandle" ref="cropper"></Cropper>
        <van-popup v-model="birthday" position="bottom">
            <van-datetime-picker v-model="timePicker" type="date" :min-date="minDate" :max-date="maxDate" @confirm="getBrithday" @cancel="birthday = false"/>
        </van-popup>
	</div>
</template>
<script>
import { CellGroup,Cell,NavBar,Field,Radio,RadioGroup,Popup,DatetimePicker} from 'vant';

import Cropper from 'touch/components/common/simple-cropper';

export default {
	props: {
        callback:{
            type: Function,
        },
        popup :{
        	type : Boolean,
        	default : false
        }
    },
    components: {
    	[CellGroup.name] : CellGroup,
        [Cell.name] : Cell,
    	[NavBar.name] : NavBar,
        Cropper,
        [Field.name] : Field,
        [Radio.name] : Radio,
        [RadioGroup.name] : RadioGroup,
        [Popup.name] : Popup,
        [DatetimePicker.name] : DatetimePicker,
    },
    data () {
        return {
            id : '',
            account : '',
            form :{
                sex : 0,
                nickname : '',
                birthday : '',
                headimgurl : this.$store.getters.user.headimgurl,
            },
            birthday : false,
            minDate: new Date(1900, 1, 1),
            maxDate : new Date(),
            timePicker : new Date(),
        }
    },
    methods :{
        back(){
        	if (this.popup) {
        		this.callback();
        	}else{
        		window.history.go(-1);
        	}
        },
        //获取上传的图片
        uploadHandle (data) { 
            this.form.headimgurl = data;
        },
        //上传图片
        upload(e){
            this.$refs.cropper.upload();
        },
        //获取生日
        getBrithday(birthday){
            this.form.birthday = birthday.getFullYear() + '-' + (birthday.getMonth() + 1) + '-' + birthday.getDate();
            this.birthday = false;
        },
        init(){
            this.Axios.Home.Info()
            .then(res =>{
                var data = res.data;
                this.id = data.id;
                this.account = data.account;
                this.form.nickname = data.nickname;
                this.form.sex = data.info!=null ? data.info.sex.toString() : 0,
                this.form.birthday = data.info!= null ? data.info.birthday : '';

                if(data.info!=null){
                    this.timePicker = new Date(data.info.birthday.split('-'));
                }
                this.form.headimgurl =  data.headimgurl!= '' ?  data.headimgurl : require('touch/assets/home/head.png');
            })
        },
        //保存信息
        save(){
            this.Axios.Home.InfoSave(this.form)
            .then(res =>{
                if(!res) return false;
                this.$store.dispatch('SET_USER',res.data);
                this.back();
            })
        }
    },
}
</script>
<style>
    .info .headdiv{text-align: center;}
    .info .headdiv p {padding: 0px 0px 20px 0px; color: #808695;}
	.info .infohead{width: 150px; height: 150px; margin: 15px 0px 15px 0px;border-radius: 50%;}
</style>